import React, { Component, } from 'react'
import PropTypes from 'prop-types';
import {
    StyleSheet,
    View,
} from 'react-native';
const {
    JDDevice,
    JDText,
    JDRouter,
    JDTouchable,
    JDButton,
} = require('@areslabs/jdreact-core-lib');
const { NavigationBar } = JDRouter;

import {
    JDCountDown,
} from '@areslabs/jdreact-core-lib';

class JDCountDownExample extends Component {
    render() {
        const now = Date.now();
        return (
            <View style={styles.wrapper}>
                <NavigationBar Title="倒计时组件" />
                <View style={styles.content}>
                    <JDText>
                        跨平台通用的倒计时组件
                    </JDText>
                </View>
                <JDCountDown
                    containerStyle={{ marginTop: 10 }}
                    endDate={now + 10000}
                    startDate={now}
                    onEnd={() => console.log('onEnd')}
                    renderCountDown={this._cusCountDown}
                    interval={1000}
                />

                <View style={{
                    flexDirection: 'row',
                    marginTop: 20,
                }}>
                    <JDText style={styles.textStyle}>还剩</JDText>
                    <JDCountDown
                        startDate="2017-03-29T00:00:00"
                        endDate="2017-03-29T00:00:25"
                        daysStyle={styles.textStyle}
                        hoursStyle={[styles.textStyle, { marginLeft: 10 }]}
                        minsStyle={styles.textStyle}
                        secsStyle={styles.textStyle}
                        daysTextStyle={styles.textStyle}
                        firstColonStyle={styles.textStyle}
                        secondColonStyle={styles.textStyle}
                        thirdColonStyle={styles.textStyle}
                        hourBehindText="小时"
                        minBehindText="分"
                        secBehindText="秒"
                    />
                </View>

                <View style={{
                    flexDirection: 'row',
                    marginTop: 20,
                    backgroundColor: '#000',
                    paddingTop: 4,
                    paddingBottom: 4,
                }}>
                    <JDText style={styles.whiteText}>还剩</JDText>
                    <JDCountDown
                        ref={v => this.countDown = v}
                        leftTime={30000}
                        daysStyle={styles.whiteText}
                        hoursStyle={[styles.whiteText, { marginLeft: 10 }]}
                        minsStyle={styles.whiteText}
                        secsStyle={styles.whiteText}
                        daysTextStyle={styles.whiteText}
                        firstColonStyle={styles.whiteText}
                        secondColonStyle={styles.whiteText}
                    />
                </View>

                <JDButton style={{ marginTop: 10 }} onPress={() => {
                    this.countDown.resetTimer({ leftTime: 4000 })
                }}> reset 3rd</JDButton>
                <JDButton style={{ marginTop: 10 }} onPress={() => {
                    alert(this.countDown.getLeftTime())
                }}> get 3rd leftTime</JDButton>
            </View>
        )
    }

    _cusCountDown = (countDownProps, leftTime) => {
        return (
            <JDText style={styles.textStyle}>
                <JDText>剩余</JDText>
                <JDText>{leftTime / 1000}</JDText>
                <JDText>s</JDText>
            </JDText>
        )
    }
}
const styles = StyleSheet.create({
    wrapper: {
        flex: 1,

    },
    content: {
        paddingTop: 10,
        paddingLeft: 10,
        paddingRight: 10,
    },
    textStyle: {
        fontSize: 20,
        color: '#ee394b'
    },
    whiteText: {
        fontSize: 20,
        color: '#fff',
        fontWeight: 'bold',
    }
});
module.exports = JDCountDownExample
